<template>
  <div class="visual-comparison">
    <div class="comparison-menu comparison-left">
      <a-icon-font
        type="iconicon-beifen1"
        class="comparison-close"
        @click="closeComparison"
      />
    </div>
    <div class="comparison-menu comparison-center">
      <span>请选择要添加对比的节点</span>
      <button class="comparison-button" @click="confirmComparison">确定</button>
      <button class="comparison-button comparison-button-cancel" @click="closeComparison">取消</button>
    </div>
    <div class="comparison-menu comparison-right" @click="cancelPitch">
      取消全部选中
    </div>

    <a-modal
      title="可视化对比"
      :visible="visualComparisonVisible"
      ok-text="确定"
      cancel-text="取消"
      :width="comparisonNodes.length === 2 ? '40%' : '60%'"
      centered
      :destroy-on-close="true"
      @ok.stop="visualComparisonVisible = false"
      @cancel.stop="visualComparisonVisible = false"
    >
      <visual-comparison
        :comparison-visual-list="comparisonVisualList"
      />
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import VisualComparison from '@/components/studio/data/popup/VisualComparison.vue'
import {
  queryVisualById,
} from '@/api/pipeline'
import {KeyValueStore} from '@/components/vueGridLayout/interfate/grid-Item-data-inteface'
import { getWidgetData } from '@/api/studio'
import {dealData} from '@/components/studio/data/util'
import { removeNullEntries } from '@/util/recommend-visualization'

interface ComparisonNodeVisual {
  name: string;
  type: number;
  algType: number;
  visuals: any;
}

@Component({
  components: {
    VisualComparison
  }
})
export default class ComparisonHeader extends Vue {
  private visualComparisonVisible: boolean = false
  private get comparisonNodes() {
    return DataViewStore.comparisonNodes
  }
  /**
   * 关闭对比 header
   */
  public closeComparison() {
    DataViewStore.setComparisonStatus(false)
    DataViewStore.setComparisonNodes([])
  }

  /**
   * 取消对比全选中
   */
  public cancelPitch() {
    DataViewStore.setComparisonNodes([])
  }

  // 参与对比节点视图
  public comparisonVisualList: Array<ComparisonNodeVisual> = []

  /**
   * 确认对比 从 PipelineGraph 中取出参与对比的节点
   */
  public confirmComparison() {
    this.comparisonVisualList = []
    // 限制 2/3 个节点对比
    if(this.comparisonNodes.length >= 2 && this.comparisonNodes.length <= 3) {
      // 遍历参与对比的节点 根据节点信息 获取节点添加的可视化
      this.comparisonNodes.forEach((nodeInfo: any, index: number) => {
        this.queryVisualById(nodeInfo, index)
      })
      this.visualComparisonVisible = true
    }else {
      this.$message.warning('请选择2/3个节点参与比较', 1)
    }
  }

  /**
   * 确定对比后， 根据节点id 查询可视化
   * @param nodeInfo  节点
   * @param index 参与对比的节点索引
   */
  public async queryVisualById(nodeInfo: any, index: number) {
    this.visualComparisonVisible = true
    // 保证顺序一致  getWidgetData 数据绑定一致
    this.$set(
      this.comparisonVisualList,
      index,
      {
        name: nodeInfo.name,
        type: nodeInfo.type,
        algType: nodeInfo.data.algType,
        subType: nodeInfo.data.subType,
        visuals: []
      }
    )
    // 根据节点 Id 查询可视化
    const response = await queryVisualById({data: {tid: nodeInfo.id, type: 'task'}})
    if(response.data.code === 100) {
      if( response.data.result) {
        this.$set(this.comparisonVisualList[index], 'visuals', response.data.result)
      }else {
        this.$set(this.comparisonVisualList[index], 'visuals', [])
      }
      // 编辑节点所有可视化, 根据可视化配置信息获取可视化数据
      this.comparisonVisualList[index].visuals.forEach((nodeVisualItem: any, idx: number) => {
        // 正常数据 获取数据
        this.getWidgetData(nodeVisualItem.data.formData as KeyValueStore, nodeVisualItem, index, idx)
      })
    }
  }

  /**
   * 取节点数据 widget/getData
   * @param dataSetting 节点中添加的可视化
   * @param nodeVisualItem 参与对比节点的索引
   * @param index 参与对比节点的索引
   * @param idx 每个节点中可视可视化的索引
   */
  public async getWidgetData(dataSetting: KeyValueStore, nodeVisualItem: any ,index: number, idx: number){
    const query = {
      data:
        {
          type: dataSetting.dataType,
          id: dataSetting.dataId,
          // 'widgetJson': getWidgetJson(dataSetting)
          widgetJson: nodeVisualItem.data.widgetJson
        }
    }
    await getWidgetData(query).then( response =>{
      if(response.data.code === 100){
        // 修改尺寸
        const dom = (document as any).body.querySelector('.visual-chart')
        if(dom){
          this.comparisonVisualList[index].visuals[idx].data.chartOptions.size = [
            dom.offsetWidth,
            dom.offsetHeight
          ]
        }
        const chartType = this.comparisonVisualList[index].visuals[idx].data.chartType[1]
        const chartData = dealData(response.data.result, chartType, this.comparisonVisualList[index].visuals[idx].data)
        // 修改数据
        // TODO: temp: remove null entries to avoid rendering error
        this.comparisonVisualList[index].visuals[idx].data.chartOptions.value = removeNullEntries(<any[]>chartData)
      }
    })
  }



}
</script>

<style scoped lang="less">

/* 对比 header */
.visual-comparison {
  align-items: center;
  background: rgba(20, 24, 69, 1);
  color: #fff;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  left: 0;
  opacity: 0.79;
  overflow: hidden;
  position: fixed;
  transition: height 0.15s;
  width: 100vw;
  z-index: 400;

  .comparison-menu {
    padding: 0 38px;
  }
  /* 左侧关闭 */
  .comparison-left {
    .comparison-close {
      color: #fff;
      cursor: pointer;
      font-size: 24px;
    }
  }
  /* 中间确认 */
  .comparison-center {
    .comparison-button {
      background: rgba(105, 115, 255, 1);
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      height: 32px;
      margin-left: 10px;
      width: 65px;
    }
    /* 取消 */
    .comparison-button-cancel {
      background-color: transparent;
    }
  }

  .comparison-right {
    cursor: pointer;
  }
}
</style>
